<template>
    <ul class="control">
        <li class="content-between" v-for="(item,index) in pageList[util.findIndex(pageList,pageOnlyId)].controls" :key="index">
            <el-checkbox v-model="item.isShow">{{item.name}}</el-checkbox>
            <el-tooltip effect="dark" content="编辑" placement="bottom">
                <i class="el-icon-edit-outline" @click.stop="controlClick(item)"></i>
            </el-tooltip>
        </li> 
    </ul>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {}
    },
    computed:{
		...mapState(['pageList','pageOnlyId'])
    },
    methods: {
        controlClick(item){
            this.$store.dispatch('pushAttr',item)
            this.$store.commit('toggleAttr', true)
        }
    },
}
</script>

<style lang="scss" scoped>
.control{display: flex;flex-direction: column;align-items: center;justify-content: center;
    &>li{width: 329px;height: 50px;background: #f7f7f7;border: 1px solid #eee;border-radius: 5px;padding: 0 12px;color: #666;font-size: 14px;margin-top: 10px;cursor: pointer;
        &>i{font-size: 16px;
            &:hover{color: #409eff;cursor: pointer;}
        }
    }
}
</style>

